<template>
  <div v-permission="['sc:sale:return:check']">
    <page-wrapper content-full-height fixed-height>
      <!-- 数据表格 -->
      <vxe-grid id="DeliveryGrid" ref="grid" resizable show-overflow highlight-hover-row keep-source row-id="id"
        :columns="tableColumn" :toolbar-config="toolbarConfig" :proxy-config="proxyConfig" :pager-config="{}"
        :custom-config="{}">
        <!-- 搜索表单 -->
        <template #form>
          <j-border class="search-wrapper">
            <j-form label-width="80px" class="search-form">
              <div class="form-grid">
                <j-form-item label="单据编号" style="width: 100%">
                  <a-input v-model:value.trim="searchFormData.code" allow-clear placeholder="请输入单号" />
                </j-form-item>
                <j-form-item label="创建时间" style="width: 100%">
                  <a-range-picker v-model:value="dateRange" :show-time="true" format="YYYY-MM-DD HH:mm:ss"
                    @change="handleDateRangeChange" />
                </j-form-item>
                <j-form-item label="客户" style="width: 100%">
                  <a-select v-model:value="searchFormData.customerName" allow-clear placeholder="请选择客户">
                    <a-select-option value="1">北梦客户</a-select-option>
                    <a-select-option value="2">测试客户</a-select-option>
                    <a-select-option value="3">软件客户</a-select-option>
                  </a-select>
                </j-form-item>
                <j-form-item label="仓库名称" style="width: 100%">
                  <a-input v-model:value.trim="searchFormData.code" allow-clear placeholder="请输入仓库名称" />
                </j-form-item>
              </div>
            </j-form>
            <div class="search-btn">
              <a-space>
                <a-button type="primary" :icon="h(SearchOutlined)" @click="search">查询</a-button>
              </a-space>
            </div>
          </j-border>
        </template>
        <!-- 状态列 -->
        <template #status_default="{ row }">
          <a-tag :color="getStatusColor(row.status)">
          </a-tag>
        </template>

        <!-- 操作列 -->
        <template #action_default="{ row }">
          <table-action :actions="createActions(row)" />
        </template>
      </vxe-grid>

      <!-- 验收弹窗 -->
      <check-dialog ref="checkDialog" @success="search" />
    </page-wrapper>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import CheckDialog from './components/CheckDialog.vue';

export default defineComponent({
  name: 'SaleDelivery',
  components: {
    SearchOutlined,
    CheckDialog,
  },
  setup() {
    const grid = ref();
    const checkDialog = ref();
    const dateRange = ref<any[]>([]);

    const searchFormData = ref({
      code: '',
      customerName: '1',
      status: "",
      createTimeStart: null,
      createTimeEnd: null,
    });

    // 表格列配置
    const tableColumn = [
      { type: 'checkbox', width: 50 },
      { field: 'code', title: '单据号', width: 180 },
      { field: 'warehouseCode', title: '仓库编号', width: 120 },
      { field: 'warehouseName', title: '仓库名称', width: 120 },
      { field: 'customerCode', title: '客户编号', width: 120 },
      { field: 'customerName', title: '客户名称', width: 120 },
      { field: 'salesman', title: '销售员', width: 100 },
      { field: 'totalAmount', title: '单据金额', width: 100 },
      { field: 'productCount', title: '商品数量', width: 100 },
      { field: 'giftCount', title: '赠品数量', width: 100 },
      { field: 'createTime', title: '操作时间', width: 150 },
      { field: 'action', title: '操作', width: 160, slots: { default: 'action_default' }, fixed: 'right' },
    ];

    // 工具栏配置
    const toolbarConfig = {
      slots: {
        buttons: 'toolbar_buttons',
      },
      refresh: true,
      export: true,
      print: true,
      zoom: true,
      custom: true,
    };

    // 代理配置
    const proxyConfig = {
      ajax: {
        query: ({ page, sorts, filters }) => {
          // 模拟API返回数据
          return Promise.resolve({
            code: 200,
            msg: 'success',
            data: {
              records: [
                {
                  id: '1',
                  code: 'SR202403010001',
                  warehouseCode: 'WH001',
                  warehouseName: '主仓库',
                  customerCode: 'C001',
                  customerName: '北梦客户',
                  salesman: '张三',
                  totalAmount: 1000.00,
                  productCount: 2,
                  giftCount: 0,
                  createTime: '2024-03-01 10:00:00',
                },
                {
                  id: '2',
                  code: 'SR202403010002',
                  warehouseCode: 'WH002',
                  warehouseName: '分仓库',
                  customerCode: 'C002',
                  customerName: '测试客户',
                  salesman: '李四',
                  totalAmount: 800.00,
                  productCount: 1,
                  giftCount: 1,
                  createTime: '2024-03-01 14:00:00',
                }
              ],
              total: 2
            }
          });
        },
      },
      props: {
        result: 'data.records',
        total: 'data.total',
      },
      autoLoad: true,
    };

    // 获取状态颜色
    const getStatusColor = (status: string) => {
      const colorMap: Record<string, string> = {
        CREATED: 'warning',
        APPROVED: 'success',
        REJECTED: 'error',
      };
      return colorMap[status] || 'default';
    };

    // 创建操作按钮
    const createActions = (row: any) => {
      const actions = [{
        label: '验收',
        onClick: () => checkDialog.value?.openCheck(row),
      }];

      return actions;
    };

    // 处理日期范围变化
    const handleDateRangeChange = (dates: any[]) => {
      if (dates && dates.length === 2) {
        searchFormData.value.createTimeStart = dates[0];
        searchFormData.value.createTimeEnd = dates[1];
      } else {
        searchFormData.value.createTimeStart = null;
        searchFormData.value.createTimeEnd = null;
      }
    };

    // 查询
    const search = () => {
      grid.value?.commitProxy('query');
    };


    return {
      h,
      SearchOutlined,
      grid,
      checkDialog,
      dateRange,
      searchFormData,
      tableColumn,
      toolbarConfig,
      proxyConfig,
      getStatusColor,
      createActions,
      search,
      handleDateRangeChange,
    };
  },
});
</script>

<style lang="less" scoped>
.search-wrapper {
  position: relative;
  background-color: #fff;
  padding: 16px;
  border-radius: 2px;

  :deep(.search-form) {
    width: 60%;
    margin-right: 100px;

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .ant-form-item {
      margin: 0;
    }

    .ant-input,
    .ant-select {
      width: 100%;
    }
  }

  :deep(.j-form-item-container) {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .ant-input-wrapper {
      width: 100%;
    }
  }

  .search-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
  }
}
</style>
